<template lang="pug">
  kalix-dialog.user-add(title='添加' bizKey="course" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL")
    div.el-form(slot="dialogFormSlot")
      el-form-item.short(label="院系" prop="did" v-bind:label-width="labelWidth" v-bind:rules="rules.did")
        el-cascader.long(placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="true" v-bind:show-all-levels="false" change-on-select)
      el-form-item.short(label="类别" prop="gid" v-bind:label-width="labelWidth" v-bind:rules="rules.gid")
        kalix-select(v-model="formModel.gid" v-bind:requestUrl="GenresnameURL" id="value" label="label" appName="genresname" placeholder="请选择课程类别")
      el-form-item.short(label="授课教师" prop="uid" v-bind:rules="rules.uid" v-bind:label-width="labelWidth")
        kalix-select(v-model="formModel.uid" v-bind:requestUrl="UsernameURL" id="value" label="label" appName="username" placeholder="请选择授课教师")
      el-form-item.short(label="课程名称" prop="name" v-bind:label-width="labelWidth" v-bind:rules="rules.name")
        el-input(v-model="formModel.name")
      el-form-item.short(label="课程照片" prop="photo" v-bind:label-width="labelWidth" v-bind:rules="rules.photo")
        kalix-clansman-upload(:action="action" v-on:filePath="getFilePath" fileType="img" tipText="只能上传jpg/png文件")
      el-form-item.short(label="课程简介" prop="introduction" v-bind:label-width="labelWidth" v-bind:rules="rules.introduction")
        el-input(v-model="formModel.introduction" type="textarea" resize="none" rows="4")
      el-form-item.short(label="课程要点" prop="points" v-bind:label-width="labelWidth" v-bind:rules="rules.points")
        el-input(v-model="formModel.points" type="textarea" resize="none" rows="4")
      el-form-item.short(label="课时" prop="classHour" v-bind:label-width="labelWidth" v-bind:rules="rules.classHour")
        el-input-number(v-model="formModel.classHour" :min="0")
      el-form-item.short(label="学分" prop="credit" v-bind:label-width="labelWidth" v-bind:rules="rules.credit")
        el-input-number(v-model="formModel.credit" :min="0")
</template>

<script type="text/ecmascript-6">
  import {CourseURL, DepartmentsURL} from '../../config.toml'
  import FormModel from './model'
  import KalixClansmanUpload from '../../../../../components/fileUpload/upload'
  import {baseURL} from '../../../../../config/global.toml'
  import KalixSelect from '../../../../../components/corelib/components/common/baseSelect'
  export default {
    name: 'CourseAdd',
    components: {DepartmentsURL, KalixSelect, KalixClansmanUpload},
    data() {
      return {
        formModel: Object.assign({}, FormModel),
        action: baseURL + '/camel/rest/upload',
        labelWidth: '170px',
        rules: {
          did: [{required: true, message: '请选择院系', trigger: 'change'}],
          gid: [{required: true, message: '请选择课程类别', trigger: 'change'}],
          uid: [{required: true, message: '请选择授课教师', trigger: 'change'}],
          name: [{required: true, message: '请输入课程名称', trigger: 'change'}],
          photo: [{required: true, message: '请选择图片', trigger: 'change'}],
          introduction: [{required: true, message: '请输入课程简介', trigger: 'change'}],
          points: [{required: true, message: '请输入课程要点', trigger: 'change'}],
          classHour: [{required: true, message: '请输入课时', trigger: 'change'}],
          credit: [{required: true, message: '请输入学分', trigger: 'change'}]
        },
        targetURL: CourseURL,
        UsernameURL: CourseURL + '/getUidBySelect',
        GenresnameURL: CourseURL + '/getGidBySelect',
        options: []
      }
    },
    mounted() {
      this.getDepCascader() // 获取院系信息并以级联形式显示
    },
    methods: {
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
      },
      getFilePath(filePath, fileName) {
        console.log('--getFilePath---', filePath)
        console.log('--fileName---', fileName)
        this.formModel.photo = filePath
        this.formModel.imgName = fileName
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        this.formModel.did = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
        console.log('did========================', this.formModel.did)
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        console.log('getDepCascader========================')
        this.axios.request({
          method: 'GET',
          url: DepartmentsURL + '/getDepCascader'
        }).then(res => {
          console.log('Request-Cascader-Success==============', res.data.data)
          this.options = res.data.data
        })
      }
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 70%
    margin auto
    .el-input
      width 70%
    .radio
      margin-left 20px
      .el-radio
        color: #3465cb
        font-weight: bold
        font-size: 14px

</style>
